﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Menu</title>
<!-- Incluyo el archivo exterior con la clase Menu de javascript -->
<script type="text/javascript" src="menu.js"></script>
<script type="text/javascript">
	<!--
	//Creo una instancia de la clase Menu
	var menu1= new Desplegable();
	
	//Creo una propiedad "items", la cual es el array de ítems que tendrá nuestro menu, la creo fuera de la clase ya que nos permite personalizar el menu sin tener que editar la clase.
	menu1.items = new Array(["item-0","javascript:;","Alternative"],["item-1","javascript:;","Blues"],["item-2","javascript:;","Jazz"],["item-3","javascript:;","Reggae"]);
	//Creo una propiedad "suitems", la cual es el array de sub ítems que apareceran dentro de cada ítem.
	menu1.subitems = new Array([["subitem-0","javascript:;","Boyz"],["subitem-1","javascript:;","Do You Feel"],["subitem-2","javascript:;","New Wave"]],[["subitem-0","javascript:;","Six Silver Strings"],["subitem-1","javascript:;","United We Swing"],["subitem-2","javascript:;","Keep On Walkin"]],[["subitem-0","javascript:;","Cornell 1964"],["subitem-1","javascript:;","Juniflip"],["subitem-2","javascript:;","Search For The New"]],[["subitem-0","javascript:;","Bongolution"],["subitem-1","javascript:;","Living Legacy"],["subitem-2","javascript:;","Reggae Gold 2007"]]);
	-->
</script>
<style type="text/css">

	/* Personalizo el aspecto del menú */
	body { font-family: "Trebuchet MS"; }
	#menu { width: 150px; padding: 0; border-bottom: solid #5cc4ff 1px; }
	#menu div { border-top: solid #5cc4ff 1px; background: #c2e9ff; }
	#menu a { padding-left: 10px; text-decoration: none; color: #00598c; font-weight: 700; display: block; width: 140px; font-size: 1em; }
	#menu a:hover { background: #d1eeff; }
	#menu ul { margin: 0; padding: 0; font-size: 0.9em; background: #f0faff; overflow: hidden; }
	#menu li { list-style: none; font-size: 0.8em; padding: 0; }
	#menu li a { padding-left: 25px; width: 125px; }
	#menu li a:hover { color: #0086d2; background: #daf3ff; }

</style>
</head>
<!-- En el onLoad del body debo ejecutar el método "escribe" que me permite escribir el menu pero luego de asegurarnos que el DIV "menu" ya este cargado en la página -->
<body onLoad="menu1.escribeacordeon('menu',22,5);">
<div id="menu">

</div>
</body>
</html>
